<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="page-title">内容展示网站</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #007bff;
            --background-color: #ffffff;
        }
        
        body {
            background-color: var(--background-color);
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color), #6c757d);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        
        .hero-title {
            font-size: 3.5rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }
        
        .hero-description {
            font-size: 1.25rem;
            opacity: 0.9;
        }
        
        .content-section {
            padding: 60px 0;
        }
        
        .image-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }
        
        .image-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .image-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        }
        
        .image-card img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        
        .video-gallery {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 2rem;
            margin: 2rem 0;
        }
        
        .video-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        }
        
        .video-card video {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }
        
        .text-content {
            background: white;
            padding: 2rem;
            border-radius: 15px;
            margin: 1rem 0;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }
        
        .section-title {
            font-size: 2.5rem;
            font-weight: bold;
            text-align: center;
            margin-bottom: 3rem;
            color: var(--primary-color);
        }
        
        .loading {
            text-align: center;
            padding: 3rem;
            color: #666;
        }
        
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2.5rem;
            }
            
            .image-gallery,
            .video-gallery {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="hero-section">
        <div class="container">
            <h1 class="hero-title" id="site-title">内容展示网站</h1>
            <p class="hero-description" id="site-description">欢迎访问我们的网站</p>
        </div>
    </div>

    <div class="container content-section">
        <div id="loading" class="loading">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">加载中...</span>
            </div>
            <p>正在加载内容...</p>
        </div>

        <div id="content" style="display: none;">
            <div id="text-section">
                <div id="text-content"></div>
            </div>

            <div id="image-section">
                <h2 class="section-title">图片展示</h2>
                <div id="image-gallery" class="image-gallery"></div>
            </div>

            <div id="video-section">
                <h2 class="section-title">视频展示</h2>
                <div id="video-gallery" class="video-gallery"></div>
            </div>
        </div>
    </div>

    <footer class="bg-dark text-white text-center py-4 mt-5">
        <div class="container">
            <p>&copy; 2024 内容展示网站. 保留所有权利.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
    <script>
        AOS.init({
            duration: 800,
            once: true
        });

        async function loadContent() {
            try {
                const response = await fetch('/api/config');
                const config = await response.json();
                
                document.getElementById('page-title').textContent = config.title;
                document.getElementById('site-title').textContent = config.title;
                document.getElementById('site-description').textContent = config.description;
                
                if (config.theme) {
                    document.documentElement.style.setProperty('--primary-color', config.theme.primaryColor);
                    document.documentElement.style.setProperty('--background-color', config.theme.backgroundColor);
                }
                
                renderTextContent(config.content.texts || []);
                renderImages(config.content.images || []);
                renderVideos(config.content.videos || []);
                
                document.getElementById('loading').style.display = 'none';
                document.getElementById('content').style.display = 'block';
                
            } catch (error) {
                console.error('加载内容失败:', error);
                document.getElementById('loading').innerHTML = '<p class="text-danger">加载内容失败，请稍后重试</p>';
            }
        }

        function renderTextContent(texts) {
            const textContent = document.getElementById('text-content');
            textContent.innerHTML = '';
            
            texts.forEach((text, index) => {
                const textDiv = document.createElement('div');
                textDiv.className = 'text-content';
                textDiv.setAttribute('data-aos', 'fade-up');
                textDiv.innerHTML = `<div>${text.content}</div>`;
                textContent.appendChild(textDiv);
            });
        }

        function renderImages(images) {
            const imageGallery = document.getElementById('image-gallery');
            const imageSection = document.getElementById('image-section');
            
            if (images.length === 0) {
                imageSection.style.display = 'none';
                return;
            }
            
            imageSection.style.display = 'block';
            imageGallery.innerHTML = '';
            
            images.forEach((image, index) => {
                const imageCard = document.createElement('div');
                imageCard.className = 'image-card';
                imageCard.setAttribute('data-aos', 'fade-up');
                imageCard.setAttribute('data-aos-delay', index * 100);
                
                imageCard.innerHTML = `
                    <img src="${image.path}" alt="${image.originalname}" loading="lazy">
                `;
                
                imageGallery.appendChild(imageCard);
            });
        }

        function renderVideos(videos) {
            const videoGallery = document.getElementById('video-gallery');
            const videoSection = document.getElementById('video-section');
            
            if (videos.length === 0) {
                videoSection.style.display = 'none';
                return;
            }
            
            videoSection.style.display = 'block';
            videoGallery.innerHTML = '';
            
            videos.forEach((video, index) => {
                const videoCard = document.createElement('div');
                videoCard.className = 'video-card';
                videoCard.setAttribute('data-aos', 'fade-up');
                videoCard.setAttribute('data-aos-delay', index * 100);
                
                videoCard.innerHTML = `
                    <video controls preload="metadata">
                        <source src="${video.path}" type="${video.type}">
                        您的浏览器不支持视频标签。
                    </video>
                `;
                
                videoGallery.appendChild(videoCard);
            });
        }

        document.addEventListener('DOMContentLoaded', loadContent);
    </script>
</body>
</html>